<template>
    <view>
        <view class="topBox">
            <view class="topBoxItem">

            </view>
            <view class="topBoxItem completion">
                <text>已完成0/100</text>
            </view>
            <view class="topBoxItem progress">
                <image src="@/static/img/zhuanshi.png" class="zhuanshi"></image>
                <view class="number">0</view>
                <view class="button">+</view>
            </view>
        </view>
		<view class="bottomBox">
			<view class="content" v-for="i in arr">
			    <view class="image">
			        <image src="@/static/img/suo.png" class="aixin"></image>
			    </view>
			    <view class="cont">{{ i }}</view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				arr:[
					"一起录一首歌",
					"一起包一次饺子",
					"一起去教堂",
					"一起去图书馆",
					"一起去果园摘水果",
					"一起看电影",
					"一起朋友圈秀恩爱",
					"一起放风筝",
					"一起拍九连拍",
					"一起看日出日落",
					"一起去看流星雨",
					"一起夜晚公园散步",
					"一起开车兜风",
					"一起熬一次通宵",
					"一起喝咖啡",
					"一起跨年倒计时",
					"一起旅行",
					"一起做手工",
					"一起做蛋糕",
					"一起穿对方衣服拍照"
				]
            }
        },
        methods: {

        }
    }
</script>

<style>
    page {
        --addOperSize: 20px;
		background-color: #f0ecd8;
    }

    .topBox {
        background-color: #fd546a;
        display: flex;
        padding: 10px 0;
        justify-content: center;
        align-items: center;
    }

    .zhuanshi {
        width: 8vw;
        height: 8vw;
        position: absolute;
        top: -5px;
        left: -12px;
    }

    .aixin {
        width: 15vw;
        height: 15vw;
    }

    .topBoxItem {
        width: 16vw;
    }

    .progress {
        display: flex;
        width: 16vw;
        position: relative;
    }

    .completion {
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(to right, #FD546A, rgba(255, 255, 255, 0.6) 50%, #FD546A);
        width: 50vw;
        height: 3em;
        font-size: 13px;
    }

    .number {
        width: 100%;
        background-color: #F2F2E6;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 20px;
    }

    .button {
        color: white;
        width: var(--addOperSize);
        height: var(--addOperSize);
        background-color: #9EC122;
        border-radius: 50%;
        position: absolute;
        right: -5px;
        top: -7px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
    }
	.bottomBox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		
	}
	.content {
		background-color: #fff;
		width: 20vw;
		padding: 2vw;
		margin-bottom: 1vw;
	}
	.image {
		background-color: #fcf8ec;
		height: 28vw;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 3vw;
	}
	.cont {
		font-size: 3vw;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>